<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keen - Responsive Bootstrap Admin & Dashboard Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<link rel="canonical" href="https://keenthemes.com"/>
	<meta property="og:locale" content="en_US"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Premium Bootstrap Admin Templates"/>
	<meta property="og:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta property="og:url" content="https://keenthemes.com/"/>
	<meta property="og:site_name" content="Keenthemes"/>
	<meta property="article:publisher" content="https://www.facebook.com/keenthemes"/>
	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta name="twitter:title" content="Premium Bootstrap Admin Templates"/>
	<meta name="twitter:domain" content="Keenthemes"/>

	<link rel="shortcut icon" href="assets/favicon.ico"/>

	<link href="assets/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="assets/style/flaticon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/line-awesome/css/line-awesome.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/socicon/css/socicon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/tether/dist/css/tether.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css"><link href="assets/style/style.css" rel="stylesheet" type="text/css"><link href="assets/plugins/highlight.js/styles/railscasts.css" rel="stylesheet" type="text/css">	<script src="assets/plugins/jquery/dist/jquery.min.js" type="application/javascript"></script><script src="assets/plugins/tether/dist/js/tether.min.js" type="application/javascript"></script><script src="assets/plugins/popper.js/dist/umd/popper.min.js" type="application/javascript"></script><script src="assets/plugins/bootstrap/dist/js/bootstrap.js" type="application/javascript"></script><script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.js" type="application/javascript"></script><script src="assets/plugins/owl.carousel/dist/owl.carousel.js" type="application/javascript"></script><script src="assets/js/custom.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/lib/highlight.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/build/highlight.pack.js" type="application/javascript"></script><script src="assets/js/docs.js" type="application/javascript"></script>
</head>
<body>
<div class="wrapper"><!-- wrapper -->

	<!-- section -->
<section class="section section--header">
    <header><!-- header -->
        <div class="content">
            <div class="header__handler">
                <div class="sidebar">
					<span class="hamburger">
						<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="40px" height="40px">
							<g>
								<path d="m91.4,33.5h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,87.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,60.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
							</g>
						</svg>
					</span>
                    <div class="sidebar__menu_wrap">
                        <span class="sidebar__menu_close">x</span>
                        <ul class="sidebar__menu"><li class="sidebar__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="sidebar__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="sidebar__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="sidebar__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="sidebar__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>                    </div>
                </div>
                <a href="https://keenthemes.com/keen" class="logo"><img src="assets/img/logo-keen.png" alt="Keen"></a>
            </div>
            <div class="header__references d-none d-md-block">
                <ul class="main__menu"><li class="main__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="main__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="main__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="main__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="main__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>            </div>
        </div>
    </header><!-- header END -->

    <!-- content -->
<div class="content">
    <div class="sub-header">
        <h4 class="title"><span>Keen</span> - The Ultimate Multi-Demo Bootstrap Admin Theme</h4>
        <h4 class="sub-title">
        	The most complete UI/UX template solution for today's web projects of any size
        </h4>
    </div>
</div>
<!-- content END -->
</section>
<!-- section END -->

	<section class="section section--white section--padding"><!-- section -->
	<div id="docs" class="content">

		<div class="contents">
			<!-- contents -->

			<div class="doc-side-menu">
				<i class="la la-bars toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
				<div class="menu-list">
					<ul id="menu-content" class="menu-content collapse"><li class=""><a href="quick-start.html" >Quick Start</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a03196ddcb" >Install<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a03196ddcb"><li class=""><a href="classic-version.html">Classic Package</a></li><li class=""><a href="installation.html">Default Package</a></li></ul></li><li class=""><a href="demos.html" >Multi-Demo</a></li><li class=""><a href="files-structure.html" >Files Structure</a></li><li class=""><a href="build-tools.html" >Build Tools</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a03196dde0" >Stylesheets<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a03196dde0"><li class=""><a href="stylesheets.html">Overview</a></li><li class=""><a href="sass-global.html">Global</a></li><li class=""><a href="sass-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a03196ddea" >Javascripts<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a03196ddea"><li class=""><a href="javascripts.html">Overview</a></li><li class=""><a href="js-global.html">Global</a></li><li class=""><a href="js-demo.html">Demo</a></li></ul></li><li class="active"><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a03196ddfd" aria-expanded="true">Custom Plugins<div class="arrow"></div></a><ul class="sub-menu collapse show" id="a5c7a03196ddfd"><li class="active"><a href="datatable.html">Keen Datatable</a></li><li class=""><a href="menu.html">Keen Menu</a></li><li class=""><a href="header.html">Keen Header</a></li><li class=""><a href="offcanvas.html">Keen Offcanvas</a></li><li class=""><a href="portlet.html">Keen Portlet</a></li><li class=""><a href="scrolltop.html">Keen Scrolltop</a></li><li class=""><a href="toggle.html">Keen Toggle</a></li><li class=""><a href="wizard.html">Keen Wizard</a></li></ul></li><li class=""><a href="rtl-version.html" >RTL Version</a></li><li class=""><a href="layout-builder.html" >Layout Builder</a></li><li class=""><a href="update.html" >Updates</a></li><li class=""><a href="backend-api.html" >Backend API</a></li><li class=""><a href="references.html" >References</a></li><li class=""><a href="security-notice.html" >Security Notice</a></li></ul>				</div>
			</div>

			<div class="contents__box contents__box--right">
				<!-- contents__box -->
				<div class="section">
	<h2 class="section-head">Keen Datatable</h2>

	<h3 id="sec14-1" class="section-title">Overview</h3>
	<div class="section-content">
		<p><code>KTDatatable</code> is a Keen's custom plugin defined in <code>[root]/theme/default/src/theme/framework/components/base/datatable/datatable.js</code>.</p>
	</div>

	<div class="space"></div>

	<h3 id="sec14-2" class="section-title">Initialization</h3>
	<div class="section-content">

        <p>Below code shows basic initialization of the datatable from element with attribute ID<code>k_datatable</code>:</p>
		<pre><code class="html">&#60;div id="kt_datatable">&#60;/div&#62;</code></pre>
		<pre><code>var datatable = $('#kt_datatable').KTDatatable(options);</code></pre>

		<p>You can also init the datatable using the class name.</p>
		<pre><code class="html">&#60;div class="my_datatable" id="kt_datatable">&#60;/div&#62;</code></pre>
		<pre><code>var datatable = $('.my_datatable').KTDatatable(options);</code></pre>

        <p class="alert alert-danger" style="margin: 25px 0 25px 0;">
            The ID attribute is required for the datatable session state such as pagination, query, etc. Datatable save state can be disabled if it's not required.
        </p>

		<pre><code class="js">var datatable = $('.kt_datatable').KTDatatable({
  // datasource definition
  data: {
    type: 'remote',
    source: {
      read: {
        url: 'inc/api/datatables/demos/default.php',
        map: function(raw) {
          // sample data mapping
          var dataSet = raw;
          if (typeof raw.data !== 'undefined') {
            dataSet = raw.data;
          }
          return dataSet;
        },
      },
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
  },

  // layout definition
  layout: {
    scroll: false,
    footer: false,
  },

  // column sorting
  sortable: true,

  pagination: true,

  search: {
    input: $('#generalSearch'),
  },

  // columns definition
  columns: [
    {
      field: 'id',
      title: '#',
      sortable: 'asc',
      width: 40,
      type: 'number',
      selector: false,
      textAlign: 'center',
    }, {
      field: 'employee_id',
      title: 'Employee ID',
    }, {
      field: 'name',
      title: 'Name',
      template: function(row, index, datatable) {
        return row.first_name + ' ' + row.last_name;
      },
    }, {
      field: 'email',
      width: 150,
      title: 'Email',
    }, {
      field: 'phone',
      title: 'Phone',
    }, {
      field: 'hire_date',
      title: 'Hire Date',
      type: 'date',
      format: 'MM/DD/YYYY',
    }, {
      field: 'gender',
      title: 'Gender',
    }, {
      field: 'status',
      title: 'Status',
      // callback function support for column rendering
      template: function(row) {
        var status = {
          1: {'title': 'Pending', 'class': 'kt-badge--brand'},
          2: {'title': 'Delivered', 'class': ' kt-badge--metal'},
          3: {'title': 'Canceled', 'class': ' kt-badge--primary'},
          4: {'title': 'Success', 'class': ' kt-badge--success'},
          5: {'title': 'Info', 'class': ' kt-badge--info'},
          6: {'title': 'Danger', 'class': ' kt-badge--danger'},
          7: {'title': 'Warning', 'class': ' kt-badge--warning'},
        };
        return '<span class="kt-badge ' + status[row.status].class + ' kt-badge--inline kt-badge--pill">' + status[row.status].title + '</span>';
      },
    }, {
      field: 'type',
      title: 'Type',
      // callback function support for column rendering
      template: function(row) {
        var status = {
          1: {'title': 'Online', 'state': 'danger'},
          2: {'title': 'Retail', 'state': 'primary'},
          3: {'title': 'Direct', 'state': 'accent'},
        };
        return '<span class="kt-badge kt-badge--' + status[row.type].state + ' kt-badge--dot"></span>&nbsp;<span class="kt-font-bold kt-font-' + status[row.type].state + '">' +
            status[row.type].title + '</span>';
      },
    }, {
      field: 'Actions',
      title: 'Actions',
      sortable: false,
      width: 130,
      overflow: 'visible',
      textAlign: 'center',
      template: function(row, index, datatable) {
        var dropup = (datatable.getPageSize() - index) <= 4 ? 'dropup' : '';
        return '\
                    <div class="dropdown ' + dropup + '">\
                        <a href="#" class="btn btn-hover-brand btn-icon btn-pill" data-toggle="dropdown">\
                            <i class="la la-ellipsis-h"></i>\
                        </a>\
                        <div class="dropdown-menu dropdown-menu-right">\
                            <a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\
                            <a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
                            <a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
                        </div>\
                    </div>\
                    <a href="#" class="btn btn-hover-brand btn-icon btn-pill" title="Edit details">\
                        <i class="la la-edit"></i>\
                    </a>\
                    <a href="#" class="btn btn-hover-danger btn-icon btn-pill" title="Delete">\
                        <i class="la la-trash"></i>\
                    </a>\
                ';
      },
    }],

});</code></pre>
	</div>

	<div class="space"></div>

	<h3 id="sec14-3" class="section-title">Options</h3>
	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Field</th>
				<th class="force-border">Type</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>data.type</code></td>
				<td nowrap><code>string</code></td>
				<td>Required. Set type to <code>remote</code> for remote data get public URL.
					<code>local</code> is for local data predefined in variable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>type: 'remote'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.url</code></td>
				<td nowrap><code>string</code></td>
				<td>If <code>data.type</code> is defined as
					<code>remote</code>. Type of remote datasource can be static or dynamic.
					For the static datasource you can define static JSON file URL. And for dynamic datasource with pagination, sorting and filtering need to be defined as above sample.
					<code>url</code> is required, and <code>params</code> object is optional.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>url: 'inc/api/datatables/demos/orders.php'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.method</code></td>
				<td nowrap><code>string</code></td>
				<td>Request method for ajax request. The value can be <code>GET</code> or
					<code>POST</code>.
					The default value is <code>POST</code>.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>method: 'GET'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.headers</code></td>
				<td nowrap><code>object</code></td>
				<td>Headers parameter object will be sent along in the datatable API request headers.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">headers: {
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
},</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.contentType</code></td>
				<td nowrap><code>object</code></td>
				<td>Content type to be sent to the server. Default to <code>application/x-www-form-urlencoded; charset=UTF-8</code>

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">contentType: 'application/json',</code></pre></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.params</code></td>
				<td nowrap><code>object</code></td>
				<td>Your own API may require some parameter to call for getting the data. E.g. token, search keywords, IDs, etc. This query parameters object will be sent along in the datatable API request.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">params: {
  generalSearch: '',
  EmployeeID: 1
  token: 'tokenvalue'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.map</code></td>
				<td nowrap><code>function</code></td>
				<td>Custom mapping the received data into datatable grid.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">map: function(raw) {
  // sample data mapping
  var dataSet = raw;
  if (typeof raw.data !== 'undefined') {
	dataSet = raw.data;
  }
  return dataSet;
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.source.read.timeout</code></td>
				<td nowrap><code>number</code></td>
				<td>Number of milliseconds before the request ended. Default is 30000, equal to 30 seconds.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>timeout: 30000</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.pageSize</code></td>
				<td nowrap><code>number</code></td>
				<td>Define page size of data for each request. Default value is 10.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>pageSize: 10</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.saveState.cookie</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Set true or false to enable/disable datatable state to save in
					<code>cookie</code>. Default value is true.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>cookie: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.saveState.webstorage</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Set true or false to enable/disable datatable state to save in
					<code>webstorage</code>. Default value is true.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>webstorage: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.serverPaging</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable pagination in server side. Only applied for the
					<code>remote</code> data.type.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>serverPaging: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.serverFiltering</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable filtering in server side. Only applied for the
					<code>remote</code> data.type.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>serverFiltering: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.serverSorting</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable sorting in server side. Only applied for the
					<code>remote</code> data.type.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">serverSorting: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>data.autoColumns</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable auto create columns. By enabling this, the datatable will automatically create all available data in an object.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">autoColumns: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Layout</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>layout.theme</code></td>
				<td nowrap><code>string</code></td>
				<td>Define which class of theme to apply into datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>theme: 'default'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.class</code></td>
				<td nowrap><code>string</code></td>
				<td>Custom class to add into datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">class: 'kt-datatable--brand'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.scroll</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable scroll.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">scroll: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.height</code></td>
				<td nowrap><code>string</code></td>
				<td>Define fixed height for the datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">height: 300</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.footer</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable footer.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">footer: false</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.header</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable header.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">header: false</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.customScrollbar</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable custom scrollbar. Default is true.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">customScrollbar: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.spinner.overlayColor</code></td>
				<td nowrap><code>string</code></td>
				<td>Spinner background overlay color.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">overlayColor: '#000000'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.spinner.opacity</code></td>
				<td nowrap><code>number</code></td>
				<td>Spinner background opacity.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">opacity: 0</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.spinner.type</code></td>
				<td nowrap><code>string</code></td>
				<td>Spinner type.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">type: 'loader'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.spinner.state</code></td>
				<td nowrap><code>string</code></td>
				<td>Spinner state style. Default to brand.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">state: 'brand'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.spinner.message</code></td>
				<td nowrap><code>boolean</code><br><code>string</code></td>
				<td>Enable/disable loading message during spinner is active. Set boolean or text string message.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">message: true</code></pre>
								<pre><code class="js">message: 'Loading..'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.icons.sort</code></td>
				<td nowrap><code>object</code></td>
				<td>Options config for the icons class for sorting icon ascending and descending.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">sort: {
  asc: 'la la-arrow-up',
  desc: 'la la-arrow-down'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.icons.pagination</code></td>
				<td nowrap><code>object</code></td>
				<td>Icons for pagination buttons.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">pagination: {
  next: 'la la-angle-right',
  prev: 'la la-angle-left',
  first: 'la la-angle-double-left',
  last: 'la la-angle-double-right',
  more: 'la la-ellipsis-h'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>layout.icons.rowDetail</code></td>
				<td nowrap><code>object</code></td>
				<td>rowDetail is for expand and collapse icon for table with child table.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">rowDetail: {
  expand: 'fa fa-caret-down',
  collapse: 'fa fa-caret-right'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Others</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>sortable</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable columns sortable globally.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">sortable: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>pagination</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable pagination globally.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">pagination: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>search.onEnter</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Set the search input keyup event to enter. The internal search will be triggered using
					<code>Enter</code> button. Set false to trigger search on keyup any buttons.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
													<pre><code class="js">search: {
   onEnter: true,
},
</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>search.input</code></td>
				<td nowrap><code>jQuery</code></td>
				<td>Pass the jQuery element of input. The datatable will add onKeyup event to the input to trigger the internal search filter the data that already in the table.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
													<pre><code class="js">search: {
   input: $('#generalSearch'),
},
</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>search.delay</code></td>
				<td nowrap><code>number</code></td>
				<td>Control the speed of search and data load request to reduce the search call frequency automatically. Default value is 400ms.
					Set the number of milliseconds.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
													<pre><code class="js">search: {
  // search delay in milliseconds
  delay: 400,
},
</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Toolbar</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>toolbar.layout</code></td>
				<td nowrap><code>array</code></td>
				<td>Set the order of pagination and info by array index.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">layout: ['pagination', 'info']</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.placement</code></td>
				<td nowrap><code>array</code></td>
				<td>An array list of placement for pagination buttons. Can be multiple values. Set the pagination placement to bottom or top.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">placement: ['bottom']</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.type</code></td>
				<td nowrap><code>string</code></td>
				<td>Pagination type.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">type: 'default'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.pages.desktop</code></td>
				<td nowrap><code>object</code></td>
				<td>Pagination pages responsive config for desktop. An object that contains layout and pagesNumber.<br>
					Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">desktop: {
  layout: 'default',
  pagesNumber: 6
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.pages.tablet</code></td>
				<td nowrap><code>object</code></td>
				<td>Pagination pages responsive config for tablet. An object that contains layout and pagesNumber.<br>
					Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">tablet: {
  layout: 'default',
  pagesNumber: 3
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.pages.mobile</code></td>
				<td nowrap><code>object</code></td>
				<td>Pagination pages responsive config for mobile. Default value for layout is compact.
					Layout compact type do not have to specify pagesNumber.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">mobile: {
  layout: 'compact'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.navigation</code></td>
				<td nowrap><code>object</code></td>
				<td>Enable/disable pagination buttons for prev, next, first, last.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">navigation: {
  prev: true,
  next: true,
  first: true,
  last: true
},</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items<br>.pagination.pageSizeSelect</code></td>
				<td nowrap><code>array</code></td>
				<td>Array of Number for select size dropdown to select pagination size. -1 is used for "All" option.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">pageSizeSelect: [10, 20, 30, 50, 100]</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>toolbar.items.info</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable display of records and pagination info.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>info: true</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Translate</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>translate.records.processing</code></td>
				<td nowrap><code>string</code></td>
				<td>Translation for records loading during spinner is active.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>processing: 'Please wait...'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>translate.records.noRecords</code></td>
				<td nowrap><code>string</code></td>
				<td>Translation for no records message.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>noRecords: 'No records found'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>translate.toolbar<br>.pagination.items.default</code></td>
				<td nowrap><code>object</code></td>
				<td>Translation for pagination. Contains key for first, prev, next, last, more, input, select.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">default: {
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  more: 'More pages',
  input: 'Page number',
  select: 'Select page size'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>translate.toolbar<br>.pagination.items.info</code></td>
				<td nowrap><code>string</code></td>
				<td>Translation for info template.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>info: 'Displaying {{start}} - {{end}} of {{total}} records'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="4" class="force-border">Detail</th>
				<td></td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>detail.title</code></td>
				<td nowrap><code>string</code></td>
				<td>Sub table title.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">title: 'Load sub table'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>detail.content</code></td>
				<td nowrap><code>object</code></td>
				<td>A callback function of
					<code>Datatable</code> instance as a sub table of each record. The callback has one parameter which you can access the row data
					<code>event.data</code> and child table element in
					<code>event.detailCell</code>.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code>content: function (event) {
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Rows</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>rows</code></td>
				<td nowrap><code>object</code></td>
				<td>An array of columns with options object for each column. First column should be define as a unique key for each records.</td>
			</tr>
			<tr>
				<td nowrap><code>rows.callback</code></td>
				<td nowrap><code>string</code></td>
				<td>Row callback. <code>Deprecated in v5.0.6</code>
					Use <code>rows.beforeTemplate</code> instead.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>callback: function (row, data, index) {
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>rows.beforeTemplate</code></td>
				<td nowrap><code>string</code></td>
				<td>Row callback that call before template being rendered. Receive 3 params which are the row jQuery element, the row data and row number index.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>beforeTemplate: function (row, data, index) {
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>rows.afterTemplate</code></td>
				<td nowrap><code>string</code></td>
				<td>Row callback that call after rows has been rendered. Receive 3 params which are the row jQuery element, the row data and row number index.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>afterTemplate: function (row, data, index) {
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>rows.autoHide</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Auto hide columns which are overflow in a row for the responsive mode. By default is enabled.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>autoHide: true,</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<th colspan="3" class="force-border">Columns</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>columns</code></td>
				<td nowrap><code>array</code></td>
				<td>An array of columns with options object for each column. First column should be define as a unique key for each records.</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].field</code></td>
				<td nowrap><code>string</code></td>
				<td>Required. The field name of column.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>field: 'ColumnName'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].title</code></td>
				<td nowrap><code>string</code></td>
				<td>Required. The title name and will be displayed as header or footer.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>title: 'Column Name'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].sortable</code></td>
				<td nowrap><code>boolean</code></td>
				<td>Enable/disable sort feature for the column.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">sortable: false</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].width</code></td>
				<td nowrap><code>number</code></td>
				<td>The width size of cells under this column.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">width: 40</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].textAlign</code></td>
				<td nowrap><code>string</code></td>
				<td>The alignment of cells text under this column.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">textAlign: 'center'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].template</code></td>
				<td nowrap><code>function</code><br><code>string</code></td>
				<td>A callback function support for column rendering and recieve a parameter object of current row's value.
					Can be also a string with placeholder and define with field name {{field}}.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">template: function (row) {
  return '<span>' + row.OrderID + '</span>';
}</code></pre>
								<pre><code>template: '{{OrderID}}'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].sortCallback</code></td>
				<td nowrap><code>function</code><br><code>string</code></td>
				<td>A callback function support for custom sorting.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>data</code></td>
							<td nowrap><code>object</code></td>
							<td>
								JSON string array of original data for sorting
							</td>
						</tr>
						<tr>
							<td nowrap><code>sort</code></td>
							<td nowrap><code>string</code></td>
							<td>
								Sorting type of <code>asc</code> for ascending or
								<code>desc</code> for descending.
							</td>
						</tr>
						<tr>
							<td nowrap><code>column</code></td>
							<td nowrap><code>object</code></td>
							<td>
								Column config object
							</td>
						</tr>
						</tbody>
					</table>

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">sortCallback: function (data, sort, column) {
    var field = column['field'];
    return $(data).sort(function (a, b) {
        var aField = a[field];
        var bField = b[field];
        if (sort === 'asc') {
            return parseFloat(aField) > parseFloat(bField)
                ? 1 : parseFloat(aField) < parseFloat(bField)
                    ? -1
                    : 0;
        } else {
            return parseFloat(aField) < parseFloat(bField)
                ? 1 : parseFloat(aField) > parseFloat(bField)
                    ? -1
                    : 0;
        }
    });
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].overflow</code></td>
				<td nowrap><code>string</code></td>
				<td>CSS overflow value.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">overflow: 'visible'</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].responsive</code></td>
				<td nowrap><code>object</code></td>
				<td>Set visible or invisible for each responsive breakpoint.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">responsive: {
  visible: 'md',
  hidden: 'lg'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].selector</code></td>
				<td nowrap><code>object</code></td>
				<td>Enable column as selector (checkbox only with no text) and provide custom
					<code>class</code> name.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
										<pre><code class="js">selector: {
  class: 'kt-checkbox--solid'
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].locked</code></td>
				<td nowrap><code>object</code></td>
				<td>Set the column to which side to be locked or static. Set object with which side left/right as key and the value is which responsive breakpoint to lock.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">locked: {left: 'xl'}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>columns[ColName].autoHide</code></td>
				<td nowrap><code>boolean</code></td>
				<td>When rows.autoHide option is enabled, by default all overflowing columns will be hidden in the details row.
					Set this option to <code>false</code>, to force this column from being hidden.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">autoHide: false</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="space"></div>

	<h3 id="sec14-4" class="section-title">Events</h3>
	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Method</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-init</code></td>
				<td>
					Initialization of table.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>options</code></td>
							<td nowrap><code>object</code></td>
							<td>Datatable ID and initialized options.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-destroy</code></td>
				<td>
					On datatable destroyed.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-layout-updated</code>
				</td>
				<td>
					Event that will be triggered on layout rendering update and resizing datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Provide table parameters, eg. datatable ID attribute</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-ajax-done</code></td>
				<td>
					After ajax request is completed.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>data</code></td>
							<td nowrap><code>object</code></td>
							<td>List of all records.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-ajax-fail</code></td>
				<td>
					Ajax request is failed.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>jqXHR</code></td>
							<td nowrap><code>object</code></td>
							<td>jQuery XMLHttpRequest from jQuery request, include error details.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-goto-page</code></td>
				<td>
					Navigate to any page number.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Page details.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-update-perpage</code>
				</td>
				<td>
					Update page size.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Page details.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-reloaded</code></td>
				<td>
					Reload datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-check</code></td>
				<td>
					On check checkbox selector.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Checked records details.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-uncheck</code></td>
				<td>
					On uncheck checkbox selector.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Unchecked records details.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>kt-datatable--on-sort</code></td>
				<td>
					Sorting datatable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>event</code></td>
							<td nowrap><code>object</code></td>
							<td>Default event object.</td>
						</tr>
						<tr>
							<td nowrap><code>args</code></td>
							<td nowrap><code>object</code></td>
							<td>Sorting details. Eg. field and sort type of asc or desc.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="space"></div>

	<h3 id="sec14-5" class="section-title">API Methods</h3>
	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Method</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td style="vertical-align: top;"><code>datatable.load()</code></td>
				<td>
					Load datatable datasource. Same function with datatable.reload().
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.reload()</code></td>
				<td>
					Reload datatable datasource and rerender the table.
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.destroy()</code></td>
				<td>
					Destroy the datatable instance and revert the HTML.
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getRecord(id)</code></td>
				<td>
					Select record in the datatable by ID. ID is refers to the value of first column.
					Use with chaining methods <code>datatable.getColumn(columnName)</code>

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>id</code></td>
							<td nowrap><code>string</code></td>
							<td>
								ID is refers to the first columns value of each rows.
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getColumn(columnName)</code>
				</td>
				<td>
					Get column by column name.
					Use with chaining methods
					<code>datatable.getValue()</code> to get a cell value.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>columnName</code></td>
							<td nowrap><code>string</code></td>
							<td>
								Column name as defined in datatable options init
								<code>columns[ColName].field</code>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getValue()</code></td>
				<td>
					Get selected records values as string.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>string</code></td>
						</tr>
						</tbody>
					</table>

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="js">datatable.getRecord(1).getColumn('columnName').getValue();</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.sort(columnName, sort)</code>
				</td>
				<td>
					Sort datatable by columnName field. Sort by ascending or descending.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>columnName</code></td>
							<td nowrap><code>string</code></td>
							<td>
								Column name as defined in datatable options init
								<code>columns[ColName].field</code>
							</td>
						</tr>
						<tr>
							<td nowrap><code>sort</code></td>
							<td nowrap><code>string</code></td>
							<td>
								Sort type to ascending or descending, can accept value asc and desc.
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.setActive(cell)</code></td>
				<td>
					Set datatable selector checkbox to active state.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>cell</code></td>
							<td nowrap><code>string</code></td>
							<td>Cell is a string of selector checkbox value.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.setInactive(cell)</code></td>
				<td>
					Set datatable selector checkbox to inactive state.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>cell</code></td>
							<td nowrap><code>string</code></td>
							<td>Cell is a string of checkbox value.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.setActiveAll(active)</code>
				</td>
				<td>
					Set datatable selector checkbox active/inactive for all records.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>active</code></td>
							<td nowrap><code>boolean</code></td>
							<td>Set records selector active or inactive state by pass the boolean true or false.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.setSelectedRecords()</code>
				</td>
				<td><p><code>Deprecated in v5.0.6</code></p>
					Set selected selector checkbox.
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getSelectedRecords()</code>
				</td>
				<td>
					Get selected records.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>jQuery element of selected record rows.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.search(value, column)</code>
				</td>
				<td>
					Execute search method to filter datatable records.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>value</code></td>
							<td nowrap><code>string</code></td>
							<td>Value to filter.</td>
						</tr>
						<tr>
							<td nowrap><code>column</code></td>
							<td nowrap><code>string</code></td>
							<td>Column field name which defined in options config.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;">
					<code>datatable.setDataSourceParam(param, value)</code></td>
				<td>
					Modify the datasource parameters and save it in datatable state.
					Must be call
					<code>datatable.load()</code> to load new modified datasource and rerender table.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>param</code></td>
							<td nowrap><code>string</code></td>
							<td>Param key value. Can accept pagination, sort, query.</td>
						</tr>
						<tr>
							<td nowrap><code>value</code></td>
							<td nowrap><code>string</code></td>
							<td>The string value of param.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;">
					<code>datatable.getDataSourceParam(param)</code></td>
				<td>
					Get current datasource parameters by param type of pagination, sort, or query.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>param</code></td>
							<td nowrap><code>string</code></td>
							<td>Param key value. Can accept pagination, sort, query.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getDataSourceQuery()</code>
				</td>
				<td>
					A helper function shortcut to
					<code>datatable.getDataSourceParam('query')</code>.
					Get current query datasource parameter.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><pre><code class="js">{
  pagination: {
    field: "ShipDate",
    page: 1,
    pages: 18,
    perpage: 20,
    sort: "asc",
    total: 350
  },
  query: {
  },
  sort: {
    sort: "asc",
    field: "ShipDate"
  }
}</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getCurrentPage()</code></td>
				<td>Get current selected page number

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>number</code></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getPageSize()</code></td>
				<td>
					Get current selected page size number.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>number</code></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.getTotalRows()</code></td>
				<td>
					Get total rows of record.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Returns</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>number</code></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.hideColumn(columnName)</code>
				</td>
				<td><p><code>Deprecated in v5.0.6</code></p>
					Hide column by column's field name.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>fieldName</code></td>
							<td nowrap><code>string</code></td>
							<td>Field name of the column defined in initialized options.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.showColumn(columnName)</code>
				</td>
				<td><p><code>Deprecated in v5.0.6</code></p>
					Show column by column's field name.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>fieldName</code></td>
							<td nowrap><code>string</code></td>
							<td>Field name of the column defined in initialized options.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.table()</code></td>
				<td>
					Return the jQuery element of the table
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.row(selector)</code></td>
				<td>
					Select a single row from the table by css selector. The method return datatable instance.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>selector</code></td>
							<td nowrap><code>string</code></td>
							<td>Class name, id attribute or tag name.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.rows(selector)</code></td>
				<td>
					Select multiple rows from the table by css selector. The method return datatable instance.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>selector</code></td>
							<td nowrap><code>string</code></td>
							<td>Class name, id attribute or tag name.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.column(index)</code></td>
				<td>
					Select a single column from the table index. The method return datatable instance.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>index</code></td>
							<td nowrap><code>number</code></td>
							<td>Zero-based index number.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.columns(selector)</code></td>
				<td>
					Select multiple columns from the table by css selector. The method return datatable instance.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>selector</code></td>
							<td nowrap><code>string</code></td>
							<td>Class name, id attribute or tag name.</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.remove()</code></td>
				<td>
					Delete selected a single row or multiples rows.<br>
					Can be used after selector methods <code>row(selector)</code> or
					<code>rows(selector)</code>.
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.visible(visibility)</code></td>
				<td>
					Set the visibility of selected rows or columns. <br>
					Can be used after selector methods <code>row(selector)</code> or
					<code>rows(selector)</code>.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>visibility</code></td>
							<td nowrap><code>boolean</code></td>
							<td>Set <code>true</code> to visible, and
								<code>false</code> to hide.
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top;"><code>datatable.nodes()</code></td>
				<td>
					Return nodes of the selected rows or columns.<br>
					Can be used after selector methods <code>row(selector)</code> or
					<code>rows(selector)</code>.
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="space"></div>

	<h3 id="sec14-6" class="section-title">Ajax Response</h3>
	<div class="section-content">
		<p>Below is the sample ajax response from back-end for the remote source datatable.</p>

		<div class="space"></div>

		<pre><code>{
    "meta": {
        "page": 1,
        "pages": 35,
        "perpage": 10,
        "total": 350,
        "sort": "asc",
        "field": "ShipDate"
    },
    "data": [
        {
            "RecordID": 10,
            "OrderID": "55154-5393",
            "ShipCountry": "NG",
            "ShipCity": "Sapele",
            "ShipName": "Moen, Kertzmann and Mills",
            "ShipAddress": "1 Nancy Junction",
            "CompanyEmail": "epere9@sina.com.cn",
            "CompanyAgent": "Ely Pere",
            "CompanyName": "Jacobi, O'Conner and Kuhlman",
            "Currency": "NGN",
            "Notes": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula",
            "Department": "Shoes",
            "Website": "whitehouse.gov",
            "Latitude": 5.8750769,
            "Longitude": 5.6931356,
            "ShipDate": "1\/1\/2016",
            "PaymentDate": "2017-06-20 10:42:35",
            "TimeZone": "Africa\/Lagos",
            "Status": 3,
            "Type": 1,
            "TotalPayment": "88,211.68 NGN"
        },
        {
            "RecordID": 263,
            "OrderID": "43406-0032",
            "ShipCountry": "US",
            "ShipCity": "Fort Pierce",
            "ShipName": "Moore-Schaden",
            "ShipAddress": "451 Fuller Junction",
            "CompanyEmail": "tdefau7a@google.pl",
            "CompanyAgent": "Tristan Defau",
            "CompanyName": "Mayer and Sons",
            "Currency": "USD",
            "Notes": "mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus",
            "Department": "Music",
            "Website": "cornell.edu",
            "Latitude": 27.3980151,
            "Longitude": -80.3714326,
            "ShipDate": "1\/1\/2017",
            "PaymentDate": "2017-05-21 01:45:57",
            "TimeZone": "America\/New_York",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "7,105.23 USD"
        },
        {
            "RecordID": 77,
            "OrderID": "68016-527",
            "ShipCountry": "PH",
            "ShipCity": "Batarasa",
            "ShipName": "Gibson Inc",
            "ShipAddress": "948 Roxbury Center",
            "CompanyEmail": "smatitiaho24@dailymotion.com",
            "CompanyAgent": "Skippy Matitiaho",
            "CompanyName": "Monahan, Haley and Murphy",
            "Currency": "PHP",
            "Notes": "sit amet consectetuer adipiscing elit proin risus praesent lectus vestibulum quam sapien varius",
            "Department": "Jewelery",
            "Website": "printfriendly.com",
            "Latitude": 8.5015747,
            "Longitude": 117.3557854,
            "ShipDate": "1\/12\/2017",
            "PaymentDate": "2016-09-07 16:34:55",
            "TimeZone": "Asia\/Manila",
            "Status": 1,
            "Type": 3,
            "TotalPayment": "9,541.82 PHP"
        },
        {
            "RecordID": 330,
            "OrderID": "54868-5303",
            "ShipCountry": "PH",
            "ShipCity": "Sillon",
            "ShipName": "Balistreri Group",
            "ShipAddress": "8203 Truax Center",
            "CompanyEmail": "kvickarman95@storify.com",
            "CompanyAgent": "Kipp Vickarman",
            "CompanyName": "Kerluke and Sons",
            "Currency": "PHP",
            "Notes": "lobortis ligula sit amet eleifend pede libero quis orci nullam molestie",
            "Department": "Clothing",
            "Website": "vkontakte.ru",
            "Latitude": 11.186148,
            "Longitude": 123.7487563,
            "ShipDate": "1\/14\/2017",
            "PaymentDate": "2017-05-16 18:29:45",
            "TimeZone": "Asia\/Manila",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "8,300.97 PHP"
        },
        {
            "RecordID": 51,
            "OrderID": "49884-659",
            "ShipCountry": "ID",
            "ShipCity": "Atap",
            "ShipName": "Blanda Group",
            "ShipAddress": "1 Monica Alley",
            "CompanyEmail": "sjackes1e@reuters.com",
            "CompanyAgent": "Shelagh Jackes",
            "CompanyName": "Schiller Inc",
            "Currency": "IDR",
            "Notes": "iaculis justo in hac habitasse platea dictumst etiam faucibus cursus",
            "Department": "Jewelery",
            "Website": "forbes.com",
            "Latitude": 3.8152026,
            "Longitude": 117.1147095,
            "ShipDate": "1\/15\/2016",
            "PaymentDate": "2016-06-24 03:01:19",
            "TimeZone": "Asia\/Makassar",
            "Status": 2,
            "Type": 1,
            "TotalPayment": "8,397.18 IDR"
        },
        {
            "RecordID": 313,
            "OrderID": "23155-179",
            "ShipCountry": "PA",
            "ShipCity": "Potrero Grande",
            "ShipName": "Olson, Schmeler and Little",
            "ShipAddress": "3 Bartillon Place",
            "CompanyEmail": "cgrandison8o@auda.org.au",
            "CompanyAgent": "Corliss Grandison",
            "CompanyName": "Mills-Beatty",
            "Currency": "PAB",
            "Notes": "egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend",
            "Department": "Clothing",
            "Website": "mlb.com",
            "Latitude": 8.881634,
            "Longitude": -79.8268729,
            "ShipDate": "1\/16\/2016",
            "PaymentDate": "2017-12-06 10:30:59",
            "TimeZone": "America\/Panama",
            "Status": 3,
            "Type": 2,
            "TotalPayment": "85,706.89 PAB"
        },
        {
            "RecordID": 153,
            "OrderID": "53341-515",
            "ShipCountry": "MD",
            "ShipCity": "Saharna",
            "ShipName": "Leffler, Sawayn and Denesik",
            "ShipAddress": "07247 Del Sol Hill",
            "CompanyEmail": "fshank48@spotify.com",
            "CompanyAgent": "Findley Shank",
            "CompanyName": "Reilly LLC",
            "Currency": "MDL",
            "Notes": "dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo",
            "Department": "Industrial",
            "Website": "discuz.net",
            "Latitude": 47.6949791,
            "Longitude": 28.9654659,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2017-01-05 15:53:50",
            "TimeZone": "Europe\/Chisinau",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "993,295.17 MDL"
        },
        {
            "RecordID": 112,
            "OrderID": "50580-198",
            "ShipCountry": "PT",
            "ShipCity": "Loureiro",
            "ShipName": "Labadie, Hegmann and Jones",
            "ShipAddress": "9986 Arapahoe Place",
            "CompanyEmail": "bglaister33@bbb.org",
            "CompanyAgent": "Baxie Glaister",
            "CompanyName": "Stark, Haley and Koepp",
            "Currency": "EUR",
            "Notes": "suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas",
            "Department": "Tools",
            "Website": "apple.com",
            "Latitude": 41.4808684,
            "Longitude": -8.3624629,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-04-24 01:53:42",
            "TimeZone": "Europe\/Lisbon",
            "Status": 3,
            "Type": 3,
            "TotalPayment": "9,705.78 EUR"
        },
        {
            "RecordID": 29,
            "OrderID": "30142-106",
            "ShipCountry": "RU",
            "ShipCity": "Loukhi",
            "ShipName": "Klein-Streich",
            "ShipAddress": "61 Cascade Plaza",
            "CompanyEmail": "mgallamores@businesswire.com",
            "CompanyAgent": "Minor Gallamore",
            "CompanyName": "Huels-Strosin",
            "Currency": "RUB",
            "Notes": "sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique",
            "Department": "Beauty",
            "Website": "epa.gov",
            "Latitude": 66.0733463,
            "Longitude": 33.0544476,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-03-09 04:40:38",
            "TimeZone": "Europe\/Moscow",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "931,956.17 RUB"
        },
        {
            "RecordID": 135,
            "OrderID": "49348-387",
            "ShipCountry": "FR",
            "ShipCity": "Sens",
            "ShipName": "Collins, Hackett and Vandervort",
            "ShipAddress": "594 Hanover Crossing",
            "CompanyEmail": "tkiezler3q@live.com",
            "CompanyAgent": "Tommy Kiezler",
            "CompanyName": "Eichmann and Sons",
            "Currency": "EUR",
            "Notes": "etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi",
            "Department": "Toys",
            "Website": "instagram.com",
            "Latitude": 48.1903349,
            "Longitude": 3.2995005,
            "ShipDate": "1\/18\/2017",
            "PaymentDate": "2016-12-28 03:56:57",
            "TimeZone": "Europe\/Paris",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "811,814.44 EUR"
        }
    ]
}</code></pre>

		<div class="space"></div>

		<table class="table-list">
			<thead>
			<tr>
				<th>Field</th>
				<th>Type</th>
				<th>Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>meta</code></td>
				<td nowrap><code>object</code></td>
				<td>Meta object should contain the metadata that required for the datatable pagination to work.</td>
			</tr>
			<tr>
				<td nowrap><code>meta.page</code></td>
				<td nowrap><code>number</code></td>
				<td>The current page number.</td>
			</tr>
			<tr>
				<td nowrap><code>meta.pages</code></td>
				<td nowrap><code>number</code></td>
				<td>Total number of pages available in the server.</td>
			</tr>
			<tr>
				<td nowrap><code>meta.perpage</code></td>
				<td nowrap><code>number</code></td>
				<td>Total records per page.</td>
			</tr>
			<tr>
				<td nowrap><code>meta.total</code></td>
				<td nowrap><code>number</code></td>
				<td>Total all records number available in the server</td>
			</tr>
			<tr>
				<td nowrap><code>meta.sort</code></td>
				<td nowrap><code>string</code></td>
				<td>Sort type <code>asc</code> for ascending and <code>desc</code> for descending.
				</td>
			</tr>
			<tr>
				<td nowrap><code>meta.field</code></td>
				<td nowrap><code>string</code></td>
				<td>Field name which the sort should be applied to.</td>
			</tr>
			<tr>
				<td nowrap><code>data</code></td>
				<td nowrap><code>array</code></td>
				<td>Array of objects.</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="space"></div>

	<h3 id="sec14-8" class="section-title">Extensions</h3>
	<div class="section-content">
		The datatable can be enhanced by extensions, which give new user interaction and configuration options.

		<div class="space"></div>

		<h6>Checkbox</h6>
		Checkbox extension is use for the checkbox selector logic. Below is the default options.

		<div class="space"></div>
		<pre><code>var datatableOptions = {
   ...
   extensions: {
      checkbox: {
         vars: {
           selectedAllRows: 'selectedAllRows',
           requestIds: 'requestIds',
           rowIds: 'meta.rowIds',
         },
      },
   }
   ...
};</code></pre>

		<table class="table-list">
			<thead>
			<tr>
				<th>Field</th>
				<th>Type</th>
				<th>Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>vars.selectedAllRows</code></td>
				<td nowrap><code>string</code></td>
				<td>Flag params for selected all rows, to be sent to the server in the request.</td>
			</tr>
			<tr>
				<td nowrap><code>vars.requestIds</code></td>
				<td nowrap><code>string</code></td>
				<td>Enable to request the all rows IDs from server.</td>
			</tr>
			<tr>
				<td nowrap><code>vars.rowIds</code></td>
				<td nowrap><code>string</code></td>
				<td>Response path for all rows IDs in the server response.</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>
			</div>
			<!-- contents END -->

		</div>
	</div>
</section><!-- section END -->

	
	<!-- section -->
	<section class="section section--bg-features shadow-top-inset">
		<div class="content"><!-- content -->
			<div class="row intro-header">
				<div class="desc">
					<h3 class="title">Keen’s Key Features</h3>
					<p class="text">
						Keen empowers your project with virtually limitless array of options<br> 
						to create endless unique projects.
					</p>
					<ul class="listing">
						<li><span class="bullet"></span>Based On <strong>Bootstrap 4.x</strong></li>
						<li><span class="bullet"></span><strong>Multi-Demo</strong> Concept</li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Architect</li>
						<li><span class="bullet"></span>Integrated Build Tools: <strong>Gulp, NPM, Yarn, SASS</strong></li>
						<li><span class="bullet"></span><strong>Full RTL</strong> Support</li>
						<li><span class="bullet"></span>Included <strong>Classic(without build tool) Version</strong></li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Core Framework</li>
						<li><span class="bullet"></span><strong>Full SASS</strong> Support</li>
						<li><span class="bullet"></span>Re-Usable <strong>Component System</strong></li>
						<li><span class="bullet"></span>And many more...</li>
					</ul>
				</div>
			</div>
		</div><!-- content END -->
	</section>
	<!-- section END -->

	<!-- section -->
	<section class="section section--white shadow-top">
		<div class="content content--padding">
			<div class="x-owl-carousel owl-theme" data-items="1" data-loop="1" data-autoplay="1" data-margin="30" data-responsive-Class="true" data-smart-Speed="3000" data-autoplay-Timeout="6000" data-transition-Style="fade">
				<div class="item">
					<blockquote class="blockquote">
						We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.
						<p class="blockquote__author">Sean,<span>&nbsp;&nbsp;Keenthemes Co-Author</span></p>
					</blockquote>
				</div>
			</div>
		</div>
	</section>
	<!-- section END -->


	<footer class="section section--bg-footer">
    <img src="assets/img/logo-keenthemes.png" alt="" >
    <form action="//keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&amp;id=6998d1f883" method="post" id="mc-embedded-subscribe-form"
          name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="subscribe">
            <input type="email" name="EMAIL" placeholder="Enter your email to subscribe newsletter">
            <button type="submit" class="button button-subscribe" name="subscribe">Submit</button>
        </div>
    </form>

    <div class="socials">
        <a href="http://twitter.com/keenthemes" target="_blank"><i class="socicon-twitter"></i></a>
        <a href="https://dribbble.com/keenthemes" target="_blank"><i class="socicon-dribbble"></i></a>
        <a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank"><img class="img-fluid" src="assets/img/icon-bootstrap.png"></a>
    </div>
</footer>

</div><!-- wrapper END -->

</body>
</html>
